import application_blue from './assets/application-blue.png';
import application_yellow from './assets/application-yellow.png';
import application_orange from './assets/application-orange.png';
import application_red from './assets/application-red.png';
import application_gray from './assets/application-gray.png';
import server_blue from './assets/server-blue.png';
import server_yellow from './assets/server-yellow.png';
import server_orange from './assets/server-orange.png';
import server_red from './assets/server-red.png';
import server_gray from './assets/server-gray.png';
import database_blue from './assets/database-blue.png';
import database_yellow from './assets/database-yellow.png';
import database_orange from './assets/database-orange.png';
import database_red from './assets/database-red.png';
import database_gray from './assets/database-gray.png';
import G6 from './lib/_g6';
//配置状态
let NodeState = {
    application:{
        '0':application_gray,
        '1':application_blue,
        '2':application_yellow,
        '3':application_orange, 
        '4':application_red,
    },
    server:{
        '0':server_gray,
        '1':server_blue,
        '2':server_yellow,
        '3':server_orange,
        '4':server_red,
    },
    database:{
        '0':database_gray,
        '1':database_blue,
        '2':database_yellow,
        '3':database_orange,
        '4':database_red,
    }
};
const CreateNode = (name,option)=>{
    option = option || [];
    if(option.length > 0){
        G6.registerNode(name, {
            draw(items) {
                const group = items.getGraphicGroup();
                const cfg = items.getModel();
                let node = null;
                for(let item of option){
                    let _NodeState = NodeState[name];
                    switch (item.type) {
                    case 'image':
                        if(!_NodeState) return console.error(`没有${name}这个状态`);
                        node = group.addShape('image', {
                            attrs: {
                                ...item.attrs,
                                img: _NodeState[cfg.state || 'blue']
                            }
                        });
                        break;
                    case 'text':
                        // if(cfg[item.keyName] == '')console.error(`id为${cfg.id}的自定义节点，缺少${item.keyName}字段，节点类型为${cfg.shape}`);
                        if(cfg[item.keyName] == '')cfg[item.keyName] = '';
                        group.addShape('text', {
                            attrs: {
                                ...item.attrs,
                                text: cfg[item.keyName] || ''
                            }
                        });
                        break;
                    case 'circle':
                        node = group.addShape('circle', {
                            attrs: {
                                ...item.attrs
                            }
                        });
                        break;
                    }
                }
                return node?node:console.error('创建失败');
            }
        });
    }
};

//配置自定义节点
const _data = [
    //创建应用节点
    {
        'name':'application',option:[
            {
                type:'image',
                attrs: {
                    x: - 94 / 2,
                    y: - 94 / 2,
                    width: 94,
                    height: 94,
                }
            },
            {
                keyName:'value', 
                type:'text',
                attrs: {
                    x: 0,
                    y: -5,
                    textAlign: 'center',
                    fill: '#fff',
                    fontSize:28
                }
            },
            {
                keyName:'name', 
                type:'text',
                attrs: {
                    x: 0,
                    y: 12,
                    textAlign: 'center',
                    fill: '#fff',
                    fontSize:16
                }
            },
            {
                keyName:'describe', 
                type:'text',
                attrs: {
                    x: 0,
                    y: 27,
                    textAlign: 'center',
                    fill: '#fff',
                    fontSize:11
                }
            },
            {
                keyName:'label', 
                type:'text',
                attrs: {
                    x: 0,
                    y: 65,
                    textAlign: 'center',
                    fill: '#fff',
                    fontSize:16,
                    index: 10,
                }
            }
        ]
    },
    //创建服务器节点
    {
        name:'server',
        option:[
            {
                type:'image',
                attrs: {
                    x: - 60 / 2,
                    y: - 40 / 2,
                    width: 60,
                    height: 40,
                }
            },
            {
                type:'text',
                keyName: 'name',
                attrs: {
                    x: 0,
                    y: 12, 
                    textAlign: 'center',
                    fill: '#fff',
                    fontSize:14
                }
            },
            {
                type:'text',
                keyName: 'label',
                attrs: {
                    x: 0,
                    y: 42, 
                    textAlign: 'center',
                    fill: '#fff',
                    fontSize:16
                }
            },
        ]
    },
    //创建数据库节点
    {
        name:'database',
        option:[
            {
                type:'image',
                attrs: {
                    x: - 28 / 2,
                    y: - 36 / 2,
                    width: 28,
                    height: 36,
                }
            },
            {
                type:'text',
                keyName: 'label',
                attrs: {
                    x: 0,
                    y: 38, 
                    textAlign: 'center',
                    fill: '#fff',
                    fontSize:16
                }
            },
        ]
    }
];

for(let item of _data){
    CreateNode(item.name,item.option);
}

//-------
//弧线
G6.registerEdge('lineRadian', {
    getPath(item) {
        var points = item.getPoints();
        var start = points[0];
        var end = points[points.length - 1];
        var hgap = Math.abs(end.x - start.x);
        if (end.x > start.x) {
            return [['M', start.x, start.y], ['C', start.x + hgap / 4, start.y, end.x - hgap / 2, end.y, end.x, end.y]];
        }
        return [['M', start.x, start.y], ['C', start.x - hgap / 4, start.y, end.x + hgap / 2, end.y, end.x, end.y]];
    }
});

//直线
G6.registerEdge('line', {
    afterDraw(items) {
        const group = items.getGraphicGroup();
        const shape = group.get('children')[0];
        const startPoint = shape.getPoint(0) || {};
        let { show = false, pointColor = '#fff' } = group.model.animation;
        if(!show)return false;
        const circle = group.addShape('circle', {
            attrs: {
                x: startPoint.x || 0,
                y: startPoint.y || 0,
                fill: pointColor,
                r: 3
            }
        });
        circle.animate({
            onFrame(ratio) {
                const tmpPoint = shape.getPoint(ratio) || {};
                return {
                    x: tmpPoint.x || 0,
                    y: tmpPoint.y || 0
                };

            },
            repeat: true
        }, 3000);
    }
}, 'cubic');

//自环
G6.registerEdge('sinceRing', {
    draw(item) {
        const group = item.getGraphicGroup();
        const path = this.getPath(item);
        path[1][1] = path[0][1] * 1.05;
        path[1][2] = path[0][2] * 1;
        let { color = '#fff' } = group.model;
        return group.addShape('path', {
            attrs: {
                path,
                stroke: color
            }
        });
    }
});

export default {
    application:{
        'shape': 'application'
    },
    server:{
        'shape': 'server'
    },
    database:{
        'shape': 'database'
    }
};